<!-- 钱包记录页面 -->
<template>
  <view>
    <scroll-view
      :scroll-y="true"
      class="walletRecordsPage"
      v-if="Object.keys(detaileInfo).length"
      @scrolltolower="onScrollToLower"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onGoPullDown"
      refresher-default-style="none"
    >
      <!-- 自定义下拉刷新 -->
      <view v-if="isRefreshing" class="center">
        <u-loadmore loadmoreText="加载中..." status="loading" />
      </view>
      <view
        v-for="(item, index) in Object.keys(detaileInfo)"
        :key="index"
        class="detaileWrap"
      >
        <u-sticky bgColor="#fffff">
          <view
            class="flex"
            style="
              align-items: baseline;
              border-bottom: 6rpx solid #f5f5f5;
              background-color: #fff;
            "
            @click="calendarVisable = true"
          >
            <view class="detailItemStyle">{{ item }}</view>
            <image
              src="./static/rightArrow.svg"
              style="
                color: #999999;
                width: 18rpx;
                height: 24rpx;
                margin-left: 16rpx;
                transform: rotate(90deg);
              "
            />
          </view>
        </u-sticky>
        <view
          class="detailItemStyle"
          v-for="(citem, i) in detaileInfo[item]"
          :key="i"
        >
          <view class="flex between top">
            <view>{{ citem.remark }}</view>
            <view style="font-size: 28rpx">{{ citem.changeAmount }}</view>
          </view>
          <view class="flex between bottom">
            <view>{{ citem.createTime }}</view>
            <view>余额：{{ citem.balanceAfter }}</view>
          </view>
        </view>
      </view>
      <view style="margin-bottom: 60rpx">
        <u-loadmore :status="loadStatus" @loadmore="onScrollToLower" />
      </view>
    </scroll-view>
    <view v-else style="margin-top: 20%">
      <u-empty text="暂无数据" mode="list"></u-empty>
    </view>
    <u-datetime-picker
      ref="datetimePicker"
      :show="calendarVisable"
      mode="year-month"
      v-model="time"
      :formatter="formatter"
      @cancel="calendarVisable = false"
      @confirm="onSelectTime"
      :min-date="-1451692800000"
      :max-date="Number(new Date())"
      confirm-color="#37B874"
      :closeOnClickOverlay="true"
      @close="calendarVisable = false"
    ></u-datetime-picker>
  </view>
</template>

<script>
import { WALLETTYPE } from "../data/WalletType";
import { list } from "./services/paymentService";
import moment from "moment";
export default {
  name: "walletRecordsPage",
  data() {
    return {
      // 安全区域
      safeAreaInsets: { bottom: 0 },
      wallettype: WALLETTYPE,
      // 当前页面
      pInfo: {
        type: 1,
      },

      // 查询记录
      detaileInfo: {
        // "2025-02": [
        //     {
        //         title: "钱包充值",
        //         time: "2025-02-01 12:00",
        //         money: "+100.00",
        //         balance: "1500.00",
        //     },
        // ],
      },
      calendarVisable: false,
      time: Number(new Date()),
      queryData: {
        pageNo: 1,
        pageSize: 10,
        // pageSize: 2,
        queryType: 1,
        queryKey: "",
        source: 1,
        logType: 2,
      },
      // 上拉状态
      isRefreshing: false,
    };
  },
  onLoad(option) {
    const info = JSON.parse(decodeURIComponent(option.info)) || {};
    this.pInfo = info;
    uni.setNavigationBarTitle({
      title: info.type == this.wallettype.Recharge ? "充值记录" : "提现记录",
    });
  },

  onReady() {
    // 微信小程序需要用此写法
    this.$refs.datetimePicker?.setFormatter(this.formatter);
  },
  methods: {
    // 格式化时间
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      }
      if (type === "month") {
        return `${value}月`;
      }
      return value;
    },
    // 提交
    onSelectTime({ value }) {
      this.queryData = {
        ...this.queryData,
        queryKey: moment(value).format("YYYY-MM"),
        queryType: 1,
        pageNo: 1,
      };
      this.calendarVisable = false;
    
    },
    // 获取数据
    onGetListData(queryData) {
      this.loadStatus = "loading";
      list(queryData)
        .then((res) => {
          console.log(Object.keys(res).length, "--116");
          if (Object.keys(res).length < 1) {
            this.loadStatus = "noMore";
          } else {
            this.loadStatus = "loadmore";
          }
          // 如果是第一页
          if (queryData.pageNo <= 1 && Object.keys(this.detaileInfo).length) {
            this.detaileInfo = { ...res };
          } else {
            // this.detaileInfo = { ...this.detaileInfo, ...res };
            this.detaileInfo =this.onMergeDataSource(this.detaileInfo,res);
          }
        })
        .catch((err) => {
          this.loadStatus = "loadmore";
        });
    },
    onScrollToLower(e) {
      console.log(this.loadStatus, "--135");
      if (this.loadStatus === "loadmore") {
        this.queryData = {
          ...this.queryData,
          pageNo: this.queryData.pageNo + 1,
          queryKey: "",
          queryType: "",
        };
      }
    },
    // 上拉刷新
    onGoPullDown() {
      this.isRefreshing = true;
      list({
        ...this.queryData,
        up: 1,
        pageNo: 1,
        queryType: "",
        queryKey: Object.keys(this.detaileInfo)[0] || "",
      }).then((res) => {
        if (Object.keys(res).length < 1) {
          this.loadStatus = "noMore";
        } else {
          this.loadStatus = "loadmore";
        }
        this.detaileInfo=this.onMergeDataSource(res,this.data)
        // this.detaileInfo = { ...res, ...this.detaileInfo };
        setTimeout(() =>{
          this.isRefreshing = false;
        }, 1000);
      });
    },
    //合并数据源
    onMergeDataSource(obj1={}, obj2={}) {
      for (let key in obj2) {
        if (obj1.hasOwnProperty(key)) {
          // 如果obj1也有这个属性，合并数组
          obj1[key] = obj1[key].concat(obj2[key]);
        } else {
          // 如果obj1没有这个属性，直接赋值
          obj1[key] = obj2[key];
        }
      }
      // console.log(obj1,"--obj1")
      return {...obj1}
    }
  },
  mounted() {
    // Add your mounted logic here
  },
  beforeMount() {
    uni.getSystemInfo({
      success: (res) => {
        console.log(res.safeAreaInsets);
        // this.windowWidth = res.windowWidth
        // this.windowHeight = res.windowHeight
        this.safeAreaInsets = res.safeAreaInsets;
      },
    });
  },
  computed: {},
  watch: {
    queryData: {
      handler: function (val, oldVal) {
        console.log("---15", val);
        this.onGetListData(val);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped lang="scss">
.walletRecordsPage {
  height: 100vh;
  box-sizing: border-box;
  background-color: #fff;

  .detaileWrap {
    /* 充值详情 */
    .detailItemStyle {
      padding-top: 57rpx;
      padding-bottom: 44rpx;
      border-bottom: 4rpx solid #f5f5f5;
      padding-left: 56rpx;
      padding-right: 34rpx;

      .top {
        color: #333333;
        font-size: 32rpx;
        margin-bottom: 20rpx;
        font-weight: bold;
      }

      .bottom {
        color: #999;
        font-size: 24rpx;
      }
    }
  }
}
</style>
